<template>
  <el-card>
    <el-card class="search-condition-card">
      <el-form v-model="searchForm" ref="searchFormRef" label-width="4vw">
        <!-- 这里可以根据实际需求添加各种搜索条件输入框，以下只是示例 -->
        <el-form-item label="活动分类">
          <el-input
            v-model.trim="searchForm.title"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="btn">
      <el-button type="primary" @click="(dialogVisible = true), (isAdd = true)"
        ><i class="el-icon-plus"></i> 新增</el-button
      >
      <el-button
        type="success"
        @click="handleUser"
        :disabled="
          multipleSelection.length == 0 || multipleSelection.length > 1
        "
        ><i class="el-icon-edit"></i> 修改</el-button
      >
      <el-button
        type="danger"
        :disabled="multipleSelection.length == 0"
        @click="deleteClassify"
        ><i class="el-icon-delete"></i> 删除</el-button
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column type="index" label="编号"> </el-table-column>
      <el-table-column prop="title" label="活动分类"> </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime.replace('T',' ') }}
        </template>
      </el-table-column>
      <el-table-column label="修改时间">
        <template slot-scope="scope">
          {{ scope.row.updateTime.replace('T',' ') }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="添加活动分类"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="分类名称" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addClassify">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改活动分类"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="changeForm" :rules="rules" ref="changeForm">
        <el-form-item label="分类名称" prop="title">
          <el-input v-model="changeForm.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="changeClassify">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  addClassify,
  changeClassify,
  deleteClassify,
  getClassify
} from '@/api/classify'
import { GMTToStr } from '@/utils/GMTToStr'

export default {
  data () {
    return {
      tableData: [],
      multipleSelection: [],
      dialogVisible: false,
      dialogVisible2: false,
      form: {
        title: '',
        createTime: '',
        updateTime: ''
      },
      changeForm: {
        title: '',
        createTime: '',
        updateTime: ''
      },
      isAdd: true,
      rules: {
        title: [
          { required: true, message: '请输入活动分类', trigger: 'blur' },
          {
            min: 2,
            max: 15,
            message: '长度在 2 到 15 个字符',
            trigger: 'blur'
          }
        ]
      },
      page: 1,
      pageSize: 10,
      total: 1,
      currentPage4: 1,
      searchForm: {
        title: '',
        begin: '',
        end: ''
      },
      dateRange: ''
    }
  },
  created () {
    this.getClassify()
  },
  methods: {
    getClassify () {
      getClassify(this.page, this.pageSize, this.searchForm.title, this.searchForm.begin, this.searchForm.end)
        .then((data) => {
          console.log(data)
          this.tableData = data.data.rows
          this.total = data.data.total
        })
        .catch((data) => {
          console.log(data)
        })
    },
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val
    },
    handleClose () {
      this.$confirm('关闭对话框，新增内容将消失', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.isAdd) {
            this.dialogVisible = false
            this.form.title = ''
            this.form.createTime = ''
            this.form.updateTime = ''
          } else {
            this.dialogVisible2 = false
          }
        })
        .catch(() => {})
    },
    addClassify () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addClassify(this.form).then((data) => {
            if (data.code === 1) {
              this.dialogVisible = false
              this.getClassify()
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            } else {
              this.$message.error('用户名重复')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleUser () {
      this.changeForm = JSON.parse(JSON.stringify(this.multipleSelection[0]))
      this.dialogVisible2 = true
      this.isAdd = false
    },
    changeClassify () {
      this.$refs.changeForm.validate((valid) => {
        if (valid) {
          changeClassify(this.changeForm).then((data) => {
            console.log(data)
            if (data.code === 0) {
              this.$message.error('用户名重复')
            } else {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogVisible2 = false
              this.getClassify()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    deleteClassify () {
      const idList = this.multipleSelection.map((data) => {
        return data.id
      })
      deleteClassify(idList).then((data) => {
        if (data.code === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getClassify()
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getClassify()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getClassify()
    },
    handleSearch () {
      // 在这里可以进行搜索逻辑处理，比如发送请求等
      // 此处先简单打印出搜索条件表单数据示例
      if (this.dateRange !== '' && this.dateRange !== null) {
        const timeArr = []
        // this.dateRange是获取到的组件选择的时间区间，获取方法这里就不说了
        for (let i = 0; i < this.dateRange.length; i++) {
          timeArr.push(GMTToStr(this.dateRange[i]))
        }
        this.searchForm.begin = timeArr[0]
        this.searchForm.end = timeArr[1]
      }
      this.getClassify()
      this.searchForm.begin = ''
      this.searchForm.end = ''
    }
  }
}
</script>

<style scoped>
.search-condition-card {
  margin-bottom: 1vw;
}

.el-form {
  display: flex;
}

.search-condition-card .el-form-item {
  width: 18vw;
  margin: 0;
}
</style>
